SheetJS CE
SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!
Simple Examples
The code editors are live -- feel free to edit! They use ReactJS components and run entirely in the web browser.
Export an HTML Table to Excel XLSX
How to add to your site (click to show)
How to automate with NodeJS (click to show)
Live Example (click to hide)
This example uses a ReactJS ref
to reference the HTML TABLE element. ReactJS
details are covered in the ReactJS demo
/* The live editor requires this function wrapper */
function Table2XLSX(props) {
/* reference to the table element */
const tbl = React.useRef();
/* Callback invoked when the button is clicked */
const xport = React.useCallback(() => {
/* Create worksheet from HTML DOM TABLE */
const wb = XLSX.utils.table_to_book(tbl.current);
/* Export to file (start a download) */
XLSX.writeFile(wb, "SheetJSTable.xlsx");
});
return ( <>
<table ref={tbl}><tbody>
<tr><td colSpan="3">SheetJS Table Export</td></tr>
<tr><td>Author</td><td>ID</td><td>你好!</td></tr>
<tr><td>SheetJS</td><td>7262</td><td>வணக்கம்!</td></tr>
<tr><td colSpan="3">
<a href="//sheetjs.com">Powered by SheetJS</a>
</td></tr>
</tbody></table>
<button onClick={xport}><b>Export XLSX!</b></button>
</> );
}
SheetJS Pro Basic extends this export with support for CSS styling and rich text.
Download and Preview Apple Numbers Workbooks
How to add to your site (click to show)
Live Example (click to hide)
This demo processes https://docs.sheetjs.com/pres.numbers
/* The live editor requires this function wrapper */
function Numbers2HTML(props) {
const [__html, setHTML] = React.useState("");
/* Fetch and update HTML */
React.useEffect(() => { (async() => {
/* Fetch file */
const f = await fetch("https://docs.sheetjs.com/pres.numbers");
const ab = await f.arrayBuffer();
/* Parse file */
const wb = XLSX.read(ab);
const ws = wb.Sheets[wb.SheetNames[0]];
/* Generate HTML */
setHTML(XLSX.utils.sheet_to_html(ws));
})(); }, []);
return ( <div dangerouslySetInnerHTML={{ __html }}/> );
}
SheetJS Pro Basic extends this import with support for CSS styling and rich text.
Preview a workbook on your device
Live Example (click to hide)
This example starts from a CSV string. Use the File Input element to select a workbook to load. Use the "Export XLSX" button to write the table to XLSX.
/* The live editor requires this function wrapper */
function Tabeller(props) {
const [__html, setHTML] = React.useState("");
/* Load sample data once */
React.useEffect(() => {
/* Starting CSV data -- change data here */
const csv = `\
This,is,a,Test
வணக்கம்,สวัสดี,你好,가지마
1,2,3,4`;
/* Parse CSV into a workbook object */
const wb = XLSX.read(csv, {type: "string"});
/* Get the worksheet (default name "Sheet1") */
const ws = wb.Sheets.Sheet1;
/* Create HTML table */
setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" }));
}, []);
return ( <>
{/* Import Button */}
<input type="file" onChange={async(e) => {
/* get data as an ArrayBuffer */
const file = e.target.files[0];
const data = await file.arrayBuffer();
/* parse and load first worksheet */
const wb = XLSX.read(data);
const ws = wb.Sheets[wb.SheetNames[0]];
setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" }));
}}/>
{/* Export Button */}
<button onClick={() => {
/* Create worksheet from HTML DOM TABLE */
const table = document.getElementById("tabeller");
const wb = XLSX.utils.table_to_book(table);
/* Export to file (start a download) */
XLSX.writeFile(wb, "SheetJSIntro.xlsx");
}}><b>Export XLSX!</b></button>
{/* Show HTML preview */}
<div dangerouslySetInnerHTML={{ __html }}/>
</> );
}